<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信支付</title>
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    <!--3.验证规则样式-->
    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <!--4.核心验证文件-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>
    <script src="./js/orderjs/constants.js"></script>
    <script src="./js/orderjs/qrcode.js"></script>

    <script>
        //获取URL中指定参数名的参数值
        function getQueryString(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            let r = window.location.search.substr(1).match(reg);
            return r != null ? unescape(r[2]) : null
        }

        $(function () {
            $("#InputAmount").val(+getQueryString('totalMoney'));
            $("#payBtn").click(
                function () {
                    $.ajax({
                        url:ADD_ACCOUNT_ORDER,
                        type:"POST",
                        data:{
                            money: (+$("#InputAmount").val())*100
                        },
                        success: function (result) {
                            //预请求成功，返回订单号
                            if (result.status === 200) {
                                console.log(result.data)        //订单号
                                let url = result.data

                                //请求获取支付链接
                                $.post(GET_PAY_URL, {payId:url}, function (res) {
                                    console.log(res.data);
                                    $("#qrCode").html("")
                                    $("#qrCode").qrcode({
                                        text:res.data,
                                        width: 200,
                                        height:200,
                                        colorDark: "#000000",
                                        colorRight: "#ffffff"
                                    })
                                    //每秒查询一次支付状态
                                    let time = 0;
                                    let stateInterval = window.setInterval(function () {
                                        $.get(GET_PAY_STATE, {payId: url}, function (queryResult) {
                                            if (queryResult.data === 1) {
                                                alert("支付成功");
                                                location.href = "paySuccess.html";
                                                clearInterval(stateInterval);
                                            } else if (time >= 15) {
                                                alert("支付超时！")
                                                clearInterval(stateInterval);
                                            } else {
                                                time++;
                                            }
                                        })
                                    }, 2000);
                                })
                            }
                        }
                    })
                }

            )

        })

    </script>
</head>
<body>
<div class="container-fluid">
    <form class="form-inline clearfix">
        <header class="page-header bg-success" style="text-align: center;">
            <h2>微信支付</h2>
        </header>

        <form class="form-inline">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">￥</div>
                    <input type="text" class="form-control" id="InputAmount" placeholder="金额" disabled="disabled">
                    <div class="input-group-addon">元</div>
                </div>
            </div>
            <button type="button" class="btn btn-primary" id="payBtn">确认支付</button>
        </form>

        <div class="form-group col-lg-6" style="position: absolute;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px;">
            <div class="input-group">
                <div class="wh300">
                    <div id="qrCode" class="center-block"></div>
                </div>
            </div>
        </div>

    </form>
</div>
</body>
</html>